<template>
    <div class="app">
        <dv-border-box-8>
            <div id="mainss" class="w100 h100"></div>
        </dv-border-box-8>
    </div>
</template>

<script>
import { format } from 'highcharts';
export default {
    data() {
        return {
            option: {}
        }
    },

    mounted() {
        var chartDom = document.getElementById('mainss');
        var myChart = this.$echarts.init(chartDom);

        this.option = {

            title: {
                text: '年度风险趋势',
                x: 'left',
                top: "10",
                left: "30",
                textStyle: {//标题颜色
                    color: "#fff",
                    fontWeight: "500",
                    fontSize: '18'
                }

            },
            xAxis: {
                type: 'category',
                axisLine: {  //这是x轴文字颜色
                    lineStyle: {
                        color: "#fff",
                    }
                },
                data: ['2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年']
            },
            yAxis: {
                type: 'value',
                axisLine: {  //这是x轴文字颜色
                    lineStyle: {
                        color: "#fff",
                    }
                }
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        myChart.setOption(this.option);


    },

}
</script>

<style lang="scss" scoped>
.app {
    flex: 1;
    // background-color: #fff;
    height: 100%;
}
</style>